<template>
	<view class="container">
		<!-- 顶部区域 -->
		<view class="wrap-top"><KNav :navs="navTop" @tabChange="changeTab"></KNav></view>
		<!-- 内容区域 -->
		<view class="wrap-bottom">
		<view class="cu-card article no-card">
			<view class="cu-item shadow u-border-bottom" v-for="(item, index) in news"
				:key="index">
				<view class="title">
					<view class="text-cut">{{ item.title }}</view>
				</view>
				<view class="content">
					<image :src="item.tImg" mode="aspectFit"></image>
					<view class="desc">
						<view class="text-content">{{ item.introduceText }}</view>
						<view class="margin-top-xs">
							<view class="text-gray light sm round fl">{{ item.time }}</view>
							<view class="text-gray light sm round fr">
								<text class="text-gray cuIcon-mark text-font-size"></text>
								<text>{{ item.read }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 这个乜有搞明白为啥微信小程序样式不起作用 -->
			<!-- <KCardAticle
				v-for="(item, index) in news"
				:key="index"
				:title="item.title"
				:imageUrl="item.tImg"
				:desc="item.introduceText"
				:read="item.read"
				:time="item.time"
				@tabClick="tabClick(item)"
			></KCardAticle> -->
		</view>
		</view>
	</view>
</template>

<script>
import KNav from '@/components/K-Nav.vue';
import KCardAticle from '@/components/K-Card-Aticle.vue';
import data from '@/common/data.js';
export default {
	components: {
		KNav,
		KCardAticle
	},
	data() {
		return {
			news: data.news,
			projects: data.projects,
			navTop: [
				{
					id: 1,
					title: '全部'
				},
				{
					id: 2,
					title: 'UI设计'
				},
				{
					id: 3,
					title: 'Web前端'
				},
				{
					id: 4,
					title: 'Java后台'
				},
				{
					id: 5,
					title: '面试精选'
				},
				{
					id: 6,
					title: '技术前沿'
				},
				{
					id: 7,
					title: '更多资讯'
				}
			]
		};
	},
	methods: {
		changeTab(item) {
			console.log(item);
		},
		tabClick(item) {
			console.log(item, 'wenzhang ');
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	// #ifdef H5
	height: calc(100vh - var(--window-top) -var(--window-bottom));
	// #endif
	.wrap-top {
		height: 90rpx;
	}
	.wrap-bottom {
		height: calc(100vh - 90rpx);
		// #ifdef H5
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 90rpx);
		// #endif
		overflow: scroll;
	}
}
</style>
